<template>
   <div class="manager">
      <div class=".layui-col-space15">

         <!-- 用户名展示 -->
         <div class="layui-col-md12">
            <div class="layui-card">
               <div class="layui-card-body ">
                  <div class="layui-elem-quote">欢迎回来 ，
                     <span id="username" class="x-red">{{ originData.name }}</span>
                  </div>

                  <!-- 返回主页按钮 -->
                  <div class="return">
                     <el-button type="plain" @click="returnHome" text>返回首页</el-button>
                  </div>
               </div>
            </div>
         </div>

         <!-- 数据统计块 -->
         <div class="layui-col-md12 layui-col-md1201">
            <div class=".layui-card">
               <div class="layui-card-header">数据统计</div>
            </div>

            <div class=" layui-card-body01">

               <ul class="layui-row layui-col-space10 layui-this x-admin-carousel x-admin-backlog ">

                  <li class="layui-col-md2 layui-col-xs6">
                     <a class="x-admin-backlog-body">
                        <h3>浏览数</h3>
                        <p>
                           <cite>233</cite>
                        </p>
                     </a>
                  </li>

                  <li class="layui-col-md2 layui-col-xs6">
                     <a href="" class="x-admin-backlog-body">
                        <h3>旅程数</h3>
                        <p>
                           <cite>6666KM</cite>
                        </p>
                     </a>
                  </li>

                  <li class="layui-col-md2 layui-col-xs6">
                     <a href="javascript:;" class="x-admin-backlog-body">
                        <h3>订单数</h3>
                        <p>
                           <cite>8</cite>
                        </p>
                     </a>
                  </li>

               </ul>
            </div>
         </div>

         <!-- 用户信息块 -->
         <div class="layui-col-md12">
            <div class="layui-card01">
               <div class="layui-card-header">乘车人信息</div>
            </div>
            <div>
               <el-descriptions class="margin-top" :column="3" border>
                  <template #extra>
                     <el-button type="primary" @click="updata">修改信息</el-button>
                  </template>

                  <el-descriptions-item>
                     <template #label>
                        <div class="cell-item">
                           <el-icon>
                              <user />
                           </el-icon>
                           姓名
                        </div>
                     </template>
                     {{ UserStore.username }}
                  </el-descriptions-item>

                  <el-descriptions-item>
                     <template #label>
                        <div class="cell-item">
                           <el-icon>
                              <iphone />
                           </el-icon>
                           电话
                        </div>
                     </template>
                     {{ UserStore.userphone }}
                  </el-descriptions-item>

                  <el-descriptions-item>
                     <template #label>
                        <div class="cell-item">
                           <el-icon>
                              <Key />
                           </el-icon>
                           性别
                        </div>
                     </template>
                     {{ UserStore.usersex }}
                  </el-descriptions-item>

                  <el-descriptions-item>
                     <template #label>
                        <div class="cell-item">
                           <el-icon>
                              <MagicStick />
                           </el-icon>
                           身份证号
                        </div>
                     </template>
                     {{ UserStore.userId }}
                  </el-descriptions-item>

                  <el-descriptions-item>
                     <template #label>
                        <div class="cell-item">
                           <el-icon>
                              <Printer />
                           </el-icon>
                           邮箱
                        </div>
                     </template>
                     {{ UserStore.useremail }}
                  </el-descriptions-item>

                  <el-descriptions-item>
                     <template #label>
                        <div class="cell-item">
                           <el-icon>
                              <tickets />
                           </el-icon>
                           乘客类型
                        </div>
                     </template>
                     <el-tag>{{ UserStore.usertype }}</el-tag>
                  </el-descriptions-item>

                  <el-descriptions-item>
                     <template #label>
                        <div class="cell-item">
                           <el-icon>
                              <office-building />
                           </el-icon>
                           住址
                        </div>
                     </template>
                     {{ UserStore.useraddress }}
                  </el-descriptions-item>
               </el-descriptions>
            </div>
         </div>

         <!-- 用户修改框 -->
         <div>
            <ud />
         </div>

      </div>
   </div>
</template>

<script setup>
import { onMounted, onUpdated, reactive } from 'vue';
import { useRouter } from "vue-router";
import ud from "../components/upUserdata.vue"
import {
   Iphone,
   Location,
   OfficeBuilding,
   Tickets,
   User,
   Key,
   MagicStick,
   Printer
} from '@element-plus/icons-vue'

//pinia本地化存储用户信息
import { useUserStore } from "../store/UserStore";
import { storeToRefs } from "pinia";
const UserStore = useUserStore();
let { Updata_state } = storeToRefs(UserStore)

let originData = reactive({
   name: UserStore.username,
   Id: UserStore.userId,
   sex: UserStore.usersex,
   address: UserStore.useraddress,
   type: UserStore.usertype,
   phone: UserStore.userphone,
   email: UserStore.useremail,
})

let router = useRouter()
const returnHome = () => {
   router.push("/main")
}

const updata = () => {
   Updata_state.value = !Updata_state.value
   console.log("用户id为", UserStore.id);
}

onUpdated(() => {
   console.log(originData);
})

</script>

<style>
.manager {
   padding: 15px;
   background-color: #f2f2f2;
   height: 100%;
}

.layui-col-space15>* {
   padding: 7.5px;
}

.layui-col-md12 {
   width: 100%;
}

.layui-col-md1201 {
   margin-top: 50px;
}

.layui-card {
   margin-bottom: 15px;
   border-radius: 2px;
   background-color: #fff;
   box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05);
}

.layui-card-body {
   position: relative;
   padding: 10px 15px;
   line-height: 24px;
   box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05)
}

.layui-card-body01 {
   width: 100%;
   position: relative;
   padding: 10px 15px;
   line-height: 24px;
   box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05)
}

.layui-elem-quote {
   margin-bottom: 10px;
   padding: 15px;
   line-height: 22px;
   border-left: 5px solid #009688;
   border-radius: 0 2px 2px 0;
   background-color: #b3bcb7;
   font-size: 16px;
   color: #009688;
}

.x-red {
   color: #10100c;
   font-size: 20px;
   font-weight: 100;
}

.layui-card {
   margin-bottom: 15px;
   border-radius: 2px;
   background-color: #fff;
   box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05);
}

.layui-card-header {
   position: relative;
   height: 42px;
   line-height: 42px;
   padding: 0 15px;
   border-bottom: 1px solid #f6f6f6;
   color: #333;
   border-radius: 2px 2px 0 0;
   font-size: 26px;
}

.x-admin-carousel {
   display: flex;
   clear: both;
}

.layui-col-space10>* {
   padding: 5px;
}

.layui-col-md2 {
   width: 18%;
}

.x-admin-backlog .x-admin-backlog-body {
   display: block;
   padding: 10px 15px;
   background-color: #1e1c1c;
   color: #999;
   border-radius: 2px;
   transition: all .3s;
   -webkit-transition: all .3s;
}

.x-admin-backlog-body h3 {
   padding-bottom: 10px;
   font-size: 12px;
}

.x-admin-backlog-body p cite {
   font-style: normal;
   font-size: 30px;
   font-weight: 300;
   color: #009688;
}

.layui-row:after,
.layui-row:before {
   content: '';
   display: block;
   clear: both;
}

.layui-card01 {
   margin-top: 50px
}

.return {
   display: flex;
   justify-content: end;
   align-items: center;
   margin-top: -50px;
}

.margin-top {
   margin-top: 10px;
}
</style>